<template></template>

<script setup>
// 自己写的，错误
// const observer = new IntersectionObserver(
//   (entries) => {
//     entries.forEach((entry) => {
//       entry.img = entry.imgData;
//     });
//   },
//   { rootMargin: 10 }
// );
// document.querySelectorAll(".lazy").forEach((img) => {
//   observer.observe(img);
// });

//正确解法
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) { // 关键：检查元素是否进入视口
      const img = entry.target; // entry.target 是 DOM 元素
      // 从 data-src 加载真实图片
      img.src = img.dataset.src; 
      // 停止观察已加载的图片
      observer.unobserve(img);
    }
  });
}, { 
  rootMargin: "10px" // 正确格式：字符串，如 "10px 0px 20px 0px"
});

// 遍历所有 .lazy 元素并观察
document.querySelectorAll(".lazy").forEach((img) => {
  observer.observe(img);
});
</script>

<style scoped></style>
